<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <!--  <script src="../../package/react/babel.js"></script>
    <script src="../../package/react/react.development.js"></script>
    <script src="../../package/react/react-dom.development.js"></script> -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="react"></div>
    <script type="text/babel">
        /*     const e = React.createElement;
            class LikeButton extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = { liked: false };
                }
                render() {
                    if (this.state.liked) {
                        return 'You liked this.';
                    }
                    return e(
                        'button',
                        { onClick: () => this.setState({ liked: true }) },
                        'Like'
                    );
                }
            }
            const domContainer = document.querySelector('#react');
           
            ReactDOM.render(<LikeButton/> ,domContainer); */
        //1.创建类组件
        /*     class Weather extends React.Component{
                constructor(props){
                    console.log('constructor')
                    super(props);
                    this.state={isHot:false,wind:'微风'}
                    this.changeWeather = this.changeWeather.bind(this)
                }
                render(){
                    const {isHot,wind}=this.state
                    return <h1 onClick={this.changeWeather}>今天天气{isHot?'炎热':"凉爽"}，{wind}</h1>
                }
                changeWeather(){
                    const isHot = this.state.isHot
                    this.setState({isHot:!isHot})
                }
            }
            ReactDOM.render(<Weather/>,document.getElementById("react")) */
        /*    const reactElement=<h1>hello,world</h1>;
           ReactDOM.render(reactElement,document.getElementById("react")) */
        /*   function tick(){
          const element=( <div>
              <h1>hello world</h1>
              <h2>{new Date().toLocaleTimeString()}</h2>
              </div>);
          ReactDOM.render(element,document.getElementById("react"))
          }
          setInterval(()=>{
              tick()
          },1000) */
        /*    function Welcome(props){
               return <h2>hello,{props.name}</h2>
           }
           class ClassWelcome extends React.Component{
               render(){
                   return <h1>hello ,{this.props.name}</h1>
               }
           }
           function App(props){
               return (
                   <div>
                   <Welcome name="jack"></Welcome>
                   <Welcome name="milk"></Welcome>
                   <Welcome name="mack"></Welcome>
                   <h2>{props.name}</h2>
                   </div>)
           }
           const app=<App name='app'></App>
           const element=<Welcome name="reactDom222"></Welcome>
           ReactDOM.render(app,document.getElementById("react")) */
       /*  function Comment(props) {
            return (
                <div className='Comment'>
                    <div className="UserInfo">
                        图片{props.photo}
                    </div>
                    <div className="UserInfo-name">
                    {props.author}
                        </div>
                    <div className="Comment-date">
                        {props.date}
                    </div>
                </div>
            )
        }
        const element=<Comment photo="11" author="jack" date="7.77"></Comment>
        ReactDOM.render(element,document.getElementById("react")) */
      /*   function Clock(props){
            return (
                <div>
                    <h1> hello </h1>
                    <h2>{props.date.toLocaleTimeString()}</h2>
                    </div>
            )
        } */
      /*   class Clock extends React.Component{
            render(){
                return (
                    <div><h2>hello ,world</h2>
                    <h2>{this.props.date.toLocaleTimeString()}</h2>
                </div>
                )
            }
        }
        function tick(){
            ReactDOM.render(
                <Clock date={new Date()}/>,
                document.getElementById("react")
            )
        }
       setInterval(tick,1000) */
      /*  class Clock extends React.Component{
           constructor(props){
               super(props);
               this.state={
                date:new Date()
               }
           }
           componentDidMount(){
               this.timerID=setInterval(()=>{
                   this.tick()
               },1000)
           }
           componentWillUnmount(){
               clearInterval(this.timerID)
           }
           tick(){
               this.setState({
                   date:new Date()
               })
           }
           render(){
               return (
                   <div>
                        <h2>当地时间</h2>
                        <h2>{this.state.date.toLocaleTimeString()}</h2>
                    </div>
               )
           }
       }
       ReactDOM.render(<Clock/>,document.getElementById("react")) */
     /*   this.setState({
           counter:this.state.counter +this.props.increment,
       })
       this.setState((state,props)=>({
           counter:state.counter + props.increment
       }))
       this.setState(function(state,props){
           return {
               counter:state.counter+props.increment
           }
       })
       counstructor(props){
           super(props);
           this.state ={
               posts:[],
               comments:[]
           }
       }
       componentDidMount(){
           fetchPosts().then(response=>{
               this.setState({
                   posts:response.posts
               })
           })
           fetchComments().then(response =>{
               this.setState({
                   comments:response.comments
               })
           })
       } */
   /*  class Clock extends React.Component{
        constructor(props){
            super(props)
            this.state={
                date:new Date()
            }
        }
        componentDidMount(){
            this.beginT =setInterval(() => {
            this.setState({
                date:new Date()
            }) 
            }, 1000); 
        }
        beginTick(){
            
           clearInterval(this.beginT) 
        }
        render(){
            return (
                <div>
                    <h2>当地时间：</h2>
                    <button onClick={this.beginTick.call(this)}>开启</button>
                    <h2>{this.state.date.toLocaleTimeString()}</h2>
                </div>
            )
        }
    
        
   
    }
    ReactDOM.render(<Clock/>,document.getElementById("react")) */
    function UserGreeting(){
        return (
            <h2>这是用户</h2>
        )
    }
    function GuestGreeting(){
        return (
            <h2>这是管理员</h2>
        )
    }
    function Greeting(props){
        const isLoggedIn=props.isLoggedIn;
        console.log(typeof(isLoggedIn))
        if(isLoggedIn){
            return <UserGreeting/>
        }else{
            return <GuestGreeting/>
        }
    }
    function loginButton(props){
        return (
            <button onClick={props.onClick}>
                Login
                </button>
        )
    }
    function LogoutButton(props){
        return (
            <button onClick={props.onClick}>
                LoginOut
            </button>
        )
    }
    class LoginControl extends React.Component{
        constructor(props){
            super(props);
            this.handleLoginClick=this.handleLoginClick.bind(this);
            this.handleLogoutClick=this.handleLogoutClick.bind(this);
            this.state = {isLoggedIn:false};
        }
        handleLoginClick(){
            this.setState({isLoggedIn:true})
        }
        handleLogoutClick(){
            this.setState({isLoggedIn:false})
        }
        render(){
            const isLogginIn=this.state.isLoggedIn;
            let button;
            if(isLoggedIn){
                button=<LogoutButton onClick={this.handleLogoutClick}/>

            }else{
                button = <LogoutButton onClick={this.handleLoginClick}/>
            }
            return (
                <div>
                    <Greeting isLoggedIn={isLoggedIn}>
                        {button}
                        </Greeting>
                    </div>
            )
        }
    }
    ReactDOM.render(
        <LoginControl/>,
        document.getElementById('react')
    )
    </script>
</body>

</html>